import React, { useEffect, useRef, useState } from "react";
import { Input, Space, Typography, message } from "antd";

import ProTable, { ProTableRef } from "@/components/TablePro"; // 导入封装的表格组件
import { httpClient } from "@/common/httpClient";
import { listMonitor, createlistMonitorField } from "./listMonitorFields";
import { TableAction } from "@/types/public";
import { HearderType } from "@/common/common";
import Debuger from "./remoteDebugDrawer";
let projectName: "", setProjectName: any;
let loading: boolean, setLoading: any;
let updateData: any, setUpdateData: any;

const ProjectLists: React.FC = () => {
  const tableRef = useRef<ProTableRef>(null);

  [updateData, setUpdateData] = useState<listMonitor>();
  const [addVisible, setAddVisible] = useState(false);
  const [debugerVisible, setDebugerVisible] = useState(false);
  [loading, setLoading] = useState(false);
  [projectName, setProjectName] = useState("");
  const tableAction: TableAction<listMonitor> = {
    add: () => {
      setUpdateData(undefined);
      setAddVisible(true);
    },
    edit: (record: listMonitor) => {
      setUpdateData(record);
      setAddVisible(true);
    },
    migrate: (record?: listMonitor) => {
      setUpdateData(record);
      setDebugerVisible(true);
    },
  };
  const columns: any[] = createlistMonitorField(tableAction);

  const handleCloseAdd = () => {
    setAddVisible(false);
  };

  // 模拟API请求
  const fetchProjects = async (params: any) => {
    return await httpClient.get("admin/device/lists", {
      ...params,
    });
  };

  function deleteProject(id: any): void {
    throw new Error("Function not implemented.");
  }

  function migrateProject(id: any): void {
    throw new Error("Function not implemented.");
  }

  return (
    <div id="app-project" className="app-content">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        {/* 项目表格 */}
        <ProTable<listMonitor>
          request={fetchProjects}
          tableAction={tableAction}
          columns={columns}
          rowKey="projectId"
          searchable
          ref={tableRef}
          sticky
          resizable
          debounceWait={800}
        />
      </Space>
      <Debuger
        visible={debugerVisible}
        device={updateData}
        onClose={() => setDebugerVisible(false)}
      />
    </div>
  );
};

export default ProjectLists;
